<template>  
    <div class="container">
        <router-link 
            class="top-list" 
            v-for="item in list"
            :key="item.id"
            tag="div"
            :to="`/toplist/${item.id}`">
            <div class="img">
                <img :src="item.coverImgUrl" alt="">
            </div>
            <div class="name">{{item.name}}</div>
        </router-link>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list:null,
        }
    },
    methods: {
       
    },
    mounted() {
        this.$api.getTopList().then(res => {
            this.list = res.list
            console.log(this.list)
        })
    },
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .top-list {
        width: 30%;
        margin: 10px 0;
        .img {
            img {
                width: 100%;
            }
        }
        .name {
            text-align: center;
            white-space: nowrap;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }
    }
}

</style>